<template>
	<view class="page">
		<!-- 优惠券tab -->
		<view class="coupon-tab">
			<view class="tab" :class="{'action':TabShow===0}" @click="onCouponTab(0)">
				<text>未使用</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':TabShow===1}" @click="onCouponTab(1)">
				<text>已使用</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':TabShow===2}" @click="onCouponTab(2)">
				<text>已过期</text>
				<text class="line"></text>
			</view>
		</view>
		<!-- 优惠券列表 -->
		<u-empty v-if="couponList==0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"/>
		<view class="coupon-list">
			<view class="list" v-for="(item,index) in couponList" :key="index">
				<view class="list-data" :class="{'coupon-lose':TabShow!=0}">
					<view class="coupon-info">
						<view class="info-title">
							<view class="title"><text>{{item.title}}</text></view>
						</view>
						<view class="coupon-way">仅小程序使用</view>
						<view class="date-get">
							<view class="date"><text>{{item.startDay}}-{{item.endDay}}</text></view>
							
						</view>
						<view class="coupon-detail" @click="isDes(index)">
							详情信息<text class="coupon-jt G-font g-arrow-down" :class="{'on':current==index}"></text>
						</view>
					</view>
					
					<view class="coupon-price">
						<view class="discounts">
							<text class="min">￥</text>
							<text class="max">{{item.money}}</text>
						</view>
						<view class="get" @click="onCouponUse" v-if="TabShow===0">
							<text>立即使用</text>
						</view>
						<view class="full-reduction"><text>{{item.ruleRemark}}</text></view>
						<view class="jag"></view>
					</view>
				</view>
				<view class="use-status" v-if="TabShow != 0">
					<text v-if="TabShow === 1">已使用</text>
					<text v-else-if="TabShow === 2">已过期</text>
				</view>
				<view style="margin: 0 20rpx;font-size: 20rpx;padding: 10rpx;background-color: #ffffff;color: #909399;border-radius: 8rpx ;" v-if="current==index">
					<view>
					<view>使用方式：{{item.title}}</view>
					<view>使用范围：仅{{item.shopName}}使用</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import cache from '@/common/cache.js';
export default {
	data() {
		return {
			TabShow: 0,
			couponList:[],
			current:null
		};
	},
	onLoad() {
		const value = cache.get('setUserData', false);
		if(!value){
			uni.showToast({
				icon: 'error',
				position: 'bottom',
				title: '请登陆小程序'
			});
		}else{
			this.onLoadCoupon(1);
		}
	},
	methods:{
		isDes(i){
			if(this.current==i){
				this.current=null;
			}else{
				this.current=i;
			}
		},
		/**
		 * 加载我领取的优惠券
		 */
		onLoadCoupon(v){
			console.log(v)
			const params={
				status:v,
				pageNo:1,
				pageSize:10
			}
			this.$Request.post(this.$api.coupon.getMyCoupon,params).then(res => {
				if (res.code === 20000 && res.data!=null) {
					this.couponList=[...this.couponList, ...res.data];
				}
			})
			
		},	
		/**
		 * 优惠券tab点击
		 * @param {Number} type
		 */
		onCouponTab(type){
			this.TabShow = type;
			this.couponList=[];
			this.onLoadCoupon(type+1);
		},
		/**
		 * 去使用点击
		 */
		onCouponUse(){
			uni.reLaunch({
				url: '/pages/activity/index'
			})
		}
	}
};
</script>

<style scoped lang="scss">
@import 'card.scss';
</style>
